<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
    
  <meta name="description" content="林湃滨的个人博客" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
     滨书
  </title>
  <meta name="generator" content="hexo-theme-yilia-plus">
  
  <link rel="shortcut icon" href="/favicon.ico" />
  
  
<link rel="stylesheet" href="/css/style.css">

  
<script src="/js/pace.min.js"></script>


  

  

<link rel="alternate" href="/atom.xml" title="滨书" type="application/atom+xml">
</head>

</html>

<body>
  <div id="app">
    <main class="content">
      
<section class="cover">
    
  <div class="cover-frame">

    <div class="bg-box">
      <img src="/images/coverWLOP.jpg" alt="image frame" />
    </div>
      <iframe style="display: inline-block;float: right;margin: 10px;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=4901576078&auto=1&height=430"></iframe>

    
    <div class="cover-inner text-center text-white">
      <h1><a href="/">滨书</a></h1>
      <div id="subtitle-box">
        
        <span id="subtitle"></span>
        
      </div>
      <div>
        
      </div>
    </div>
  </div>
  <div class="cover-learn-more">
    <a href="javascript:void(0)" class="anchor"><i class="ri-arrow-down-line"></i></a>
  </div>
</section>



<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>


<div id="main">
  <section class="outer">
  <article class="articles">
    
    
    
    
    <article id="post-【FastDFS】在云服务器上部署FastDFS" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/03/14/%E3%80%90FastDFS%E3%80%91%E5%9C%A8%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E9%83%A8%E7%BD%B2FastDFS/"
    >【FastDFS】在云服务器上部署FastDFS</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/03/14/%E3%80%90FastDFS%E3%80%91%E5%9C%A8%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E9%83%A8%E7%BD%B2FastDFS/" class="article-date">
  <time datetime="2020-03-14T02:19:08.000Z" itemprop="datePublished">2020-03-14</time>
</a>
      
      
      
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      
      
      <!-- reward -->
      
    </div>
      <!-- copyright -->
      
    <footer class="article-footer">
      
      

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-数据库表建表建议" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/02/16/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A1%A8%E5%BB%BA%E8%A1%A8%E5%BB%BA%E8%AE%AE/"
    >项目开发规范建议</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/02/16/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%A1%A8%E5%BB%BA%E8%A1%A8%E5%BB%BA%E8%AE%AE/" class="article-date">
  <time datetime="2020-02-16T12:51:35.000Z" itemprop="datePublished">2020-02-16</time>
</a>
      
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%8F%91/">项目开发</a>
  </div>

      
      
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <link rel="stylesheet" class="aplayer-secondary-style-marker" href="\linpaibin\assets\css\APlayer.min.css"><script src="\linpaibin\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="项目开发规范建议"><a href="#项目开发规范建议" class="headerlink" title="项目开发规范建议"></a>项目开发规范建议</h1><h2 id="代码规范"><a href="#代码规范" class="headerlink" title="代码规范"></a>代码规范</h2><ol>
<li><p>面向对象的思想。</p>
<blockquote>
<p>读代码都一块一块读的，快速定位。命名百度一下，有最佳命名方案的。</p>
</blockquote>
</li>
<li><p>controller层接收参数，进行参数校验，然后把参数直接给service层处理。</p>
<blockquote>
<p>不要太多的逻辑处理，命名与业务相关，与service对应，接口url量采用restful,全部小写支持restful风格。</p>
</blockquote>
</li>
<li><p>service逻辑处理的关键，每个service都应该对应良好的单元测试。方便别人和自己调试你的接口，命名与业务相关。</p>
</li>
<li><p>Dao要基本不需要涉及到业务逻辑。命名也基本不与业务相关。</p>
</li>
<li><p>变量命令写全一点，一般一个对象也就在一个业务里面用一次而已，都是简写，相当于把代码做了混淆。</p>
</li>
<li><p>码后要junit测试，调试，调整代码。对自己写的代码多做review</p>
</li>
</ol>
<h2 id="数据库建表规范建议"><a href="#数据库建表规范建议" class="headerlink" title="数据库建表规范建议"></a>数据库建表规范建议</h2><blockquote>
<p>参考书籍：《MySQL性能调优与架构设计》</p>
</blockquote>
<ol>
<li><p>统一使用支持事务处理的InnoDB存储引擎，字符编码utf-8，编码核对utf8_general_ci</p>
</li>
<li><p>表间关系尽量不用id主键关联，如订单与会员管理，可以用会员的唯一编号。</p>
</li>
<li><p>适当的建立索引。 </p>
</li>
<li><p>适当的冗余字段，根据产品需求做冗余，如果有多个字段需要冗余，建议不要冗余了，一般冗余另外一张表的1~2个字段 </p>
</li>
<li><p>范式和反范式权衡使用 </p>
</li>
<li><p>表是有主次之分的。</p>
<blockquote>
<p>如订单，会建一张主要的订单信息表，相关业务都是围绕这个表扩展的，例如选品，支付，退货……一系列可扩展。到了支付系统里面，又会建立支付流水这张主表，其他的附加信息可以扩展 。</p>
</blockquote>
</li>
<li><p>表中数据不要存null这样的值，null处理麻烦事多，搞不好还会大大的影响性能，建议可以为null的值转换成not null default ‘’ </p>
</li>
<li><p>必要的唯一约束，唯一约束就是唯一索引 </p>
</li>
<li><p>表名命名建议：业务名称_表名称[_功能] </p>
</li>
</ol>
<h2 id="字段常用值说明"><a href="#字段常用值说明" class="headerlink" title="字段常用值说明"></a>字段常用值说明</h2><table>
<thead>
<tr>
<th>字段</th>
<th>字段名称</th>
<th>数据库类型</th>
<th>Java类型</th>
<th>注释</th>
</tr>
</thead>
<tbody><tr>
<td>主键</td>
<td>id</td>
<td>Bigint</td>
<td>Long</td>
<td>线下订单主键id</td>
</tr>
<tr>
<td>订单编号</td>
<td>order_no</td>
<td>Varchar(可变长度)</td>
<td>String</td>
<td>订单编号</td>
</tr>
<tr>
<td>时间</td>
<td>_time</td>
<td>timestamp</td>
<td>Date</td>
<td>时间，日期（都是用这个类型，其他类型不合适）</td>
</tr>
<tr>
<td>类型</td>
<td>_type</td>
<td>tinyint</td>
<td>Integer</td>
<td>*类型。1.批发，2零售（类型要枚举）</td>
</tr>
<tr>
<td>状态</td>
<td>_status</td>
<td>tinyint</td>
<td>Integer</td>
<td>*状态。1.已支付，2未支付（状态要枚举）</td>
</tr>
<tr>
<td>标记</td>
<td>delete_mark</td>
<td>bit</td>
<td>Boolean</td>
<td>记录是否已删除。</td>
</tr>
<tr>
<td>金额</td>
<td>_ amount</td>
<td>decimal(8,2)</td>
<td>bigdecimal</td>
<td>*金额。</td>
</tr>
<tr>
<td>价格</td>
<td>_ price</td>
<td>decimal(8,2)</td>
<td>BigDecimal</td>
<td>*价格</td>
</tr>
</tbody></table>
<p>线下：off     线上:online     订单:order     商品:good     记录:record     明细:detail</p>
<p>金额：amount     支付:payment     状态：status     类型：type     图片地址：img_url</p>
<p>区域：area     行政区：district     活动：activity     账户：account  sku     销售：Sales</p>
<p>供应商：supplier     品牌：brand     平台：platform     种类：Category</p>
<p>规格：specification     网点店铺：store     广告：ad     用户：user     子项：item</p>
<p>库存：Stock     退货：Refund     操作：operation     时间time     编码：code</p>
<p>父级：parent     子级：sub     主：main     主键：id     编号：no     历史: history</p>
<p>价格：price     原始：original     实际：reality     卖家：seller     买家：buyer</p>
<p>代理：agent     省province     市city     县county     区district        地址address</p>
<p>发货：send     创建：create     收货：receive     标志：mark     备注remark</p>

      
      <!-- reward -->
      
    </div>
      <!-- copyright -->
      
    <footer class="article-footer">
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" rel="tag">项目开发规范</a></li></ul>


    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-Java/Springboot/前后端跨域问题" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/02/12/Java/Springboot/%E5%89%8D%E5%90%8E%E7%AB%AF%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/"
    >前后端跨域问题</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/02/12/Java/Springboot/%E5%89%8D%E5%90%8E%E7%AB%AF%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/" class="article-date">
  <time datetime="2020-02-12T13:14:55.000Z" itemprop="datePublished">2020-02-12</time>
</a>
      
  <div class="article-category">
    <a class="article-category-link" href="/categories/Java/">Java</a>
  </div>

      
      
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="【前后端分离】跨域请求问题"><a href="#【前后端分离】跨域请求问题" class="headerlink" title="【前后端分离】跨域请求问题"></a>【前后端分离】跨域请求问题</h1><p>在前后端分离项目中，前后端分别处于不同IP或不同端口，发起和响应请求时，需要考虑跨域问题的处理和解决，可以在前端或后端进行实现。两者选一</p>
<h2 id="Java后端实现"><a href="#Java后端实现" class="headerlink" title="Java后端实现"></a>Java后端实现</h2><p>实现一个自定义类CorsConfiguration，实现WebMvcConfigurer接口的addCorsMappings方法</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@Configuration</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">CorsConfiguration</span> <span class="keyword">implements</span> <span class="title">WebMvcConfigurer</span></span>&#123;</span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">addCorsMappings</span><span class="params">(CorsRegistry registry)</span> </span>&#123;</span><br><span class="line">        registry.addMapping(<span class="string">"/**"</span>)</span><br><span class="line">                .allowedOrigins(<span class="string">"*"</span>)</span><br><span class="line">                .allowedMethods(<span class="string">"GET"</span>, <span class="string">"HEAD"</span>, <span class="string">"POST"</span>, <span class="string">"PUT"</span>, <span class="string">"DELETE"</span>, <span class="string">"OPTIONS"</span>)</span><br><span class="line">                .allowCredentials(<span class="keyword">true</span>)</span><br><span class="line">                .maxAge(<span class="number">3600</span>)</span><br><span class="line">                .allowedHeaders(<span class="string">"*"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


      
      <!-- reward -->
      
    </div>
      <!-- copyright -->
      
    <footer class="article-footer">
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Java/" rel="tag">Java</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/SpringBoot/" rel="tag">SpringBoot</a></li></ul>


    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-【IDEA插件推荐】EasyCode" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/02/12/%E3%80%90IDEA%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90%E3%80%91EasyCode/"
    >【IDEA插件推荐】</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/02/12/%E3%80%90IDEA%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90%E3%80%91EasyCode/" class="article-date">
  <time datetime="2020-02-12T05:10:22.000Z" itemprop="datePublished">2020-02-12</time>
</a>
      
  <div class="article-category">
    <a class="article-category-link" href="/categories/IDEA/">IDEA</a>
  </div>

      
      
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="EasyCode"><a href="#EasyCode" class="headerlink" title="EasyCode"></a>EasyCode</h1><p> Easycode是idea的一个插件，可以直接对数据的表生成entity、controller、service、dao、mapper无需任何编码，简单而强大，简称<code>牛逼</code>。 </p>
<h2 id="1、安装"><a href="#1、安装" class="headerlink" title="1、安装"></a>1、安装</h2><p><img src="https://i.loli.net/2020/02/12/UD7VJCArP8IcQ39.png" alt="微信图片_20200212212257.png"></p>
<p>这里是已经装好了的状态。</p>
<h2 id="2、建立数据库"><a href="#2、建立数据库" class="headerlink" title="2、建立数据库"></a>2、建立数据库</h2><p>建立一个数据库表book备用：</p>
<p>有字段值：图书编号id，图书名，作者</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- ---------------------------</span></span><br><span class="line"><span class="comment">-- Table structure for book</span></span><br><span class="line"><span class="comment">-- ---------------------------</span></span><br><span class="line"><span class="keyword">DROP</span> <span class="keyword">TABLE</span> <span class="keyword">IF</span> <span class="keyword">EXISTS</span> <span class="string">`book`</span>;</span><br><span class="line"><span class="keyword">CREATE</span> <span class="keyword">TABLE</span> <span class="string">`book`</span>(</span><br><span class="line">    <span class="string">`id`</span> <span class="built_in">int</span>(<span class="number">11</span>) <span class="keyword">NOT</span> <span class="literal">NULL</span>,</span><br><span class="line">    <span class="string">`name`</span> <span class="built_in">varchar</span>(<span class="number">20</span>) <span class="keyword">NOT</span> <span class="literal">NULL</span>,</span><br><span class="line">    <span class="string">`author`</span> <span class="built_in">varchar</span>(<span class="number">6</span>) <span class="keyword">DEFAULT</span> <span class="literal">NULL</span>,</span><br><span class="line">    PRIMARY <span class="keyword">KEY</span> (<span class="string">`id`</span>)</span><br><span class="line">)<span class="keyword">ENGINE</span>=<span class="keyword">InnoDB</span> <span class="keyword">DEFAULT</span> <span class="keyword">CHARSET</span>=utf8;</span><br></pre></td></tr></table></figure>



<h2 id="3、IDEA中配置连接数据库"><a href="#3、IDEA中配置连接数据库" class="headerlink" title="3、IDEA中配置连接数据库"></a>3、IDEA中配置连接数据库</h2><p>新建并打开一个新的Spring Boot项目后，如下图打开Database数据库连接窗口。</p>
<p><img src="https://i.loli.net/2020/02/12/Sx7LMsw6ZPm3WEJ.png" alt="微信图片_20200212215813.png"></p>
<p>之后如下图建立并设置一个数据库连接（此处以Mysql为例，其他数据库连接操作与此类似）</p>
<p><img src="https://i.loli.net/2020/02/12/Trcy8BEkChVAMfg.png" alt="EasyCode3.png"></p>
<p><img src="https://i.loli.net/2020/02/12/iFbRMLJXntq2GPU.png" alt="EasyCode4.png"></p>
<h2 id="4、生成代码"><a href="#4、生成代码" class="headerlink" title="4、生成代码"></a>4、生成代码</h2><p>对想要生成的表，右键，如下操作：</p>
<p><img src="https://i.loli.net/2020/02/12/ljLkSV5PCn9ycot.png" alt="EasyCode5.png"></p>
<p>设置生成的代码放入那个文件夹，勾选需要生成哪些代码，之后点击OK，就真的OK了</p>
<p><img src="https://i.loli.net/2020/02/12/sjX7RvY6ZucarqO.png" alt="EasyCode6.png"></p>
<p>各层代码包介绍</p>
<ul>
<li>entity层：实体类包</li>
<li>controller层：控制层接口包</li>
<li>service层：服务接口层</li>
<li>serviceImpl层：服务实现层</li>
<li>mapper.java层：mapper层即Dao层，负责与数据库做交互</li>
<li>mapper.xml：配置与mapper.java中相对应的Sql脚本</li>
</ul>
<p>生成后项目目录结构如下：</p>
<p><img src="https://i.loli.net/2020/02/12/rJGWL8wxQPtOmCR.png" alt="EasyCode10.png"></p>
<h2 id="5、pom-xml"><a href="#5、pom-xml" class="headerlink" title="5、pom.xml"></a>5、pom.xml</h2><p>项目所用到的pom依赖配置如下：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dependencies</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dependency</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">groupId</span>&gt;</span>org.springframework.boot<span class="tag">&lt;/<span class="name">groupId</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>spring-boot-starter-data-jdbc<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">dependency</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dependency</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">groupId</span>&gt;</span>org.springframework.boot<span class="tag">&lt;/<span class="name">groupId</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>spring-boot-starter-web<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">dependency</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dependency</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">groupId</span>&gt;</span>org.mybatis.spring.boot<span class="tag">&lt;/<span class="name">groupId</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>mybatis-spring-boot-starter<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">version</span>&gt;</span>2.1.1<span class="tag">&lt;/<span class="name">version</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">dependency</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">dependency</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">groupId</span>&gt;</span>mysql<span class="tag">&lt;/<span class="name">groupId</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>mysql-connector-java<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">scope</span>&gt;</span>runtime<span class="tag">&lt;/<span class="name">scope</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">dependency</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dependency</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">groupId</span>&gt;</span>org.springframework.boot<span class="tag">&lt;/<span class="name">groupId</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>spring-boot-starter-test<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">scope</span>&gt;</span>test<span class="tag">&lt;/<span class="name">scope</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">exclusions</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">exclusion</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">groupId</span>&gt;</span>org.junit.vintage<span class="tag">&lt;/<span class="name">groupId</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>junit-vintage-engine<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">exclusion</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">exclusions</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">dependency</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">dependencies</span>&gt;</span></span><br></pre></td></tr></table></figure>





<h2 id="6、Application-yml"><a href="#6、Application-yml" class="headerlink" title="6、Application.yml"></a>6、Application.yml</h2><p>Application.yml文件中一些参数的配置：</p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">spring:</span></span><br><span class="line">  <span class="attr">datasource:</span></span><br><span class="line">    <span class="attr">url:</span> <span class="string">jdbc:mysql://localhost:3306/sellbook?useUnicode=true&amp;characterEncoding=UTF-8&amp;serverTimezone=Asia/Shanghai</span></span><br><span class="line">    <span class="attr">username:</span> <span class="string">root</span></span><br><span class="line">    <span class="attr">password:</span> <span class="string">**********</span></span><br><span class="line">    <span class="attr">driver-class-name:</span> <span class="string">com.mysql.cj.jdbc.Driver</span></span><br><span class="line"><span class="attr">server:</span></span><br><span class="line">  <span class="attr">port:</span> <span class="number">8181</span></span><br><span class="line"></span><br><span class="line"><span class="attr">mybatis:</span></span><br><span class="line">  <span class="attr">mapper-locations:</span> <span class="string">classpath:./mapper/*Mapper.xml</span></span><br><span class="line">  <span class="attr">type-aliases-package:</span> <span class="string">com.mybatis.genertier.entity</span></span><br></pre></td></tr></table></figure>





<h2 id="7、微修并启动项目"><a href="#7、微修并启动项目" class="headerlink" title="7、微修并启动项目"></a>7、微修并启动项目</h2><h3 id="微修"><a href="#微修" class="headerlink" title="微修"></a>微修</h3><p>在启动项目前，需要再加一点东西</p>
<ul>
<li><p>在项目启动入口配置 @MapperScan注解，</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@MapperScan</span>(<span class="string">"com.mybatis.genertier.mapper"</span>) <span class="comment">//添加此处注解，在启动时候扫描mapper层</span></span><br><span class="line"><span class="meta">@SpringBootApplication</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">GenertierApplication</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title">main</span><span class="params">(String[] args)</span> </span>&#123;</span><br><span class="line">        SpringApplication.run(GenertierApplication<span class="class">.<span class="keyword">class</span>, <span class="title">args</span>)</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>或者在mapper层中的mapper类添加@Mapper注解，两者选一。</p>
</li>
</ul>
<blockquote>
<p> 真的就是添加一点……</p>
</blockquote>
<p>就可以启动项目了</p>
<h3 id="测试接口"><a href="#测试接口" class="headerlink" title="测试接口"></a>测试接口</h3><ul>
<li>测试localhost:8181/book/selectAll接口</li>
</ul>
<p><img src="https://i.loli.net/2020/02/12/NVeb2JUsm9MT1Sp.png" alt="EasyCode8.png"></p>
<ul>
<li>测试localhost:8181/book/selectOne/{id}接口</li>
</ul>
<p><img src="https://i.loli.net/2020/02/12/nIla6UGyVCSvbzk.png" alt="EasyCode9.png"></p>

      
      <!-- reward -->
      
    </div>
      <!-- copyright -->
      
    <footer class="article-footer">
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/IDEA%E6%8F%92%E4%BB%B6/" rel="tag">IDEA插件</a></li></ul>


    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-【Mysql】数据库备份" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/02/10/%E3%80%90Mysql%E3%80%91%E6%95%B0%E6%8D%AE%E5%BA%93%E5%A4%87%E4%BB%BD/"
    >【Mysql】数据库备份</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/02/10/%E3%80%90Mysql%E3%80%91%E6%95%B0%E6%8D%AE%E5%BA%93%E5%A4%87%E4%BB%BD/" class="article-date">
  <time datetime="2020-02-10T13:09:18.000Z" itemprop="datePublished">2020-02-10</time>
</a>
      
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/">数据库</a>
  </div>

      
      
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="数据库备份操作"><a href="#数据库备份操作" class="headerlink" title="数据库备份操作"></a>数据库备份操作</h1><h1 id="Mysql备份操作"><a href="#Mysql备份操作" class="headerlink" title="Mysql备份操作"></a>Mysql备份操作</h1><p>备份分为冷备份和热备份两种。</p>
<p>Mysql中的冷备份适用Myisam引擎，不适用于Innodb引擎，而且备份时候需要关闭Mysql。</p>
<p>冷备份并不常用。</p>
<h2 id="热备份"><a href="#热备份" class="headerlink" title="热备份"></a>热备份</h2><p>热备份便是执行Mysql安装根目录下的/bin文件夹下面的Mysqldump备份工具，就是说，Mysql自带了热备份需要的命令/功能，无需安装另外的东西。</p>
<h3 id="命令说明"><a href="#命令说明" class="headerlink" title="命令说明"></a>命令说明</h3><ul>
<li>mysqldump：命令工具；</li>
<li>-u用户名 -p是密码；</li>
<li>-A：指全部；</li>
<li>-d：表结构；</li>
<li>-t：表数据；</li>
<li>&gt;：指重定向，右边操作数为需要输出的路径和文件名；</li>
</ul>
<p>各个备份类型的命令如下：</p>
<p>全备份：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysqldump -u root -p 123456 -A &gt; &#x2F;back&#x2F;backdb.sql</span><br></pre></td></tr></table></figure>



<p>备份指定库命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysqldump -uroot -p123456 database1,db2 &gt; &#x2F;back&#x2F;backdb.sql</span><br></pre></td></tr></table></figure>



<p>备份指定表命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysqldump -uroot -p123456 db1 tb1,db2 tb2 &gt; &#x2F;back&#x2F;backdb.sql</span><br></pre></td></tr></table></figure>



<p>备份表结构命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysqldump -uroot -p123456 -A -d &gt; &#x2F;back&#x2F;backdb.sql</span><br></pre></td></tr></table></figure>



<p>备份表数据命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mysqldump -uroot -p123456 -A -t &gt; &#x2F;back&#x2F;backdb.sql</span><br></pre></td></tr></table></figure>



<blockquote>
<p>数据库界面化工具应该也可以备份，这方面待更新_(:D)∠)_……</p>
</blockquote>

      
      <!-- reward -->
      
    </div>
      <!-- copyright -->
      
    <footer class="article-footer">
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Mysql/" rel="tag">Mysql</a></li></ul>


    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-Vue/onClick和click的区别" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/02/10/Vue/onClick%E5%92%8Cclick%E7%9A%84%E5%8C%BA%E5%88%AB/"
    >onClick和click的区别</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/02/10/Vue/onClick%E5%92%8Cclick%E7%9A%84%E5%8C%BA%E5%88%AB/" class="article-date">
  <time datetime="2020-02-10T13:03:07.000Z" itemprop="datePublished">2020-02-10</time>
</a>
      
  <div class="article-category">
    <a class="article-category-link" href="/categories/Web%E5%89%8D%E7%AB%AF/">Web前端</a>
  </div>

      
      
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="onClick和click的区别"><a href="#onClick和click的区别" class="headerlink" title="onClick和click的区别"></a>onClick和click的区别</h1><h2 id="onClick和click含义"><a href="#onClick和click含义" class="headerlink" title="onClick和click含义"></a>onClick和click含义</h2><h3 id="onClick"><a href="#onClick" class="headerlink" title="onClick"></a>onClick</h3><p>onClick，是一个点击绑定时间，点击后绑定一个函数，如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"fuc()"</span>&gt;</span></span><br><span class="line">    点击</span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">	<span class="function"><span class="keyword">function</span> <span class="title">fuc</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">        alert(<span class="string">"触发onclick"</span>);</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>







<h3 id="click"><a href="#click" class="headerlink" title="click"></a>click</h3><p>click是点击触发一个事件，标签元素单击之后触发函数，但是click在触发函数之前会先执行onClick，之后再执行函数，如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"but"</span> &gt;</span>点击<span class="tag">&lt;/<span class="name">button</span>&gt;</span> </span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span> </span><br><span class="line"><span class="javascript">  $(<span class="string">"#but"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span></span><br><span class="line"><span class="actionscript">     alert(<span class="string">"click"</span>);</span></span><br><span class="line">  &#125;); </span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>





<h2 id="实际使用"><a href="#实际使用" class="headerlink" title="实际使用"></a>实际使用</h2><p> 实际中会怎么用呢？会像这个样子用，一个标签元素，给它两个事件，就像这样写,用来给原来的绑定事件再追加一个事件上去。 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">'but'</span> <span class="attr">onclick</span>=<span class="string">'fuc()'</span>&gt;</span>点击<span class="tag">&lt;/<span class="name">p</span>&gt;</span> </span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span> </span><br><span class="line"><span class="javascript">  $(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span></span><br><span class="line"><span class="javascript">    $(<span class="string">"#but"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span></span><br><span class="line"><span class="actionscript">      alert(<span class="string">"click"</span>); </span></span><br><span class="line">    &#125;); </span><br><span class="line">  &#125;);</span><br><span class="line"> </span><br><span class="line"><span class="actionscript">  <span class="function"><span class="keyword">function</span> <span class="title">fuc</span><span class="params">()</span></span>&#123; </span></span><br><span class="line"><span class="actionscript">    alert(<span class="string">"onclick"</span>); </span></span><br><span class="line">  &#125; </span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>


      
      <!-- reward -->
      
    </div>
      <!-- copyright -->
      
    <footer class="article-footer">
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Web/" rel="tag">Web</a></li></ul>


    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-Vue-Element前端开发" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/02/09/Vue-Element%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/"
    >Vue+Element前端开发</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/02/09/Vue-Element%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/" class="article-date">
  <time datetime="2020-02-09T05:55:08.000Z" itemprop="datePublished">2020-02-09</time>
</a>
      
  <div class="article-category">
    <a class="article-category-link" href="/categories/Web%E5%89%8D%E7%AB%AF/">Web前端</a>
  </div>

      
      
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h2 id="Vue继承Element-UI"><a href="#Vue继承Element-UI" class="headerlink" title="Vue继承Element UI"></a>Vue继承Element UI</h2><h3 id="常用标签"><a href="#常用标签" class="headerlink" title="常用标签"></a>常用标签</h3><p>ElementUI在管理系统中主要的标签有：</p>
<ul>
<li><p>el-container：构建整个页面框架</p>
</li>
<li><p>el-aside：构建左侧菜单</p>
</li>
<li><p>el-menu：左侧菜单内容，常用属性：</p>
<ul>
<li>:default-openeds：设置默认展开的菜单，通过菜单的index值进行关联</li>
<li>:default-active：设置默认选中的菜单，通过菜单的index值来关联</li>
</ul>
</li>
<li><p>el-submenu：可以展开的菜单，常用属性：</p>
<p>index：菜单下标，文本类型（<strong>不可以是数值类型</strong>）</p>
</li>
<li><p>template：对应el-submenu的菜单名</p>
</li>
<li><p>i：设置菜单图标，通过class属性设置</p>
<ul>
<li>el-icon-messae</li>
<li>el-icon-menu</li>
<li>el-icon-setting</li>
</ul>
</li>
</ul>
<h2 id="Vue-router动态构建左侧菜单"><a href="#Vue-router动态构建左侧菜单" class="headerlink" title="Vue router动态构建左侧菜单"></a>Vue router动态构建左侧菜单</h2><h3 id="menu与router进行绑定"><a href="#menu与router进行绑定" class="headerlink" title="menu与router进行绑定"></a>menu与router进行绑定</h3><ol>
<li>&lt;el-menu&gt;标签添加router属性。</li>
<li>在页面添加&lt;router-view&gt;标签，它是一个容器，动态渲染所选择的router。</li>
<li>&lt;el-menu-item&gt;标签的index值控制跳转的路径</li>
</ol>
<blockquote>
<p>待续</p>
</blockquote>

      
      <!-- reward -->
      
    </div>
      <!-- copyright -->
      
    <footer class="article-footer">
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Vue/" rel="tag">Vue</a></li></ul>


    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-hello-world" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/02/08/hello-world/"
    >Java学习路线</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/02/08/hello-world/" class="article-date">
  <time datetime="2020-02-08T08:51:11.918Z" itemprop="datePublished">2020-02-08</time>
</a>
      
      
      
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <p><img src="https://i.loli.net/2020/01/12/UYB9sHelnRL15XF.jpg" alt="1源码分析专题.jpg"></p>
<p><img src="https://i.loli.net/2020/01/12/JhGaO1jWexKMlwo.jpg" alt="2性能优化.jpg"></p>
<p><img src="https://i.loli.net/2020/01/12/EuNyqAFs4bBDCm6.jpg" alt="3高性能.jpg"></p>
<p><img src="https://i.loli.net/2020/01/12/dXjU35ECvplLwIG.jpg" alt="4分布式专题.jpg"></p>

      
      <!-- reward -->
      
    </div>
      <!-- copyright -->
      
    <footer class="article-footer">
      
      

    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-生活/2020年春节‘战疫‘" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/02/08/%E7%94%9F%E6%B4%BB/2020%E5%B9%B4%E6%98%A5%E8%8A%82%E2%80%98%E6%88%98%E7%96%AB%E2%80%98/"
    >【春节系列】2020年</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/02/08/%E7%94%9F%E6%B4%BB/2020%E5%B9%B4%E6%98%A5%E8%8A%82%E2%80%98%E6%88%98%E7%96%AB%E2%80%98/" class="article-date">
  <time datetime="2020-02-08T03:11:11.000Z" itemprop="datePublished">2020-02-08</time>
</a>
      
      
      
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <p><strong>假如生活欺骗了你，</strong></p>
<p><strong>不要悲伤，不要着急，</strong></p>
<p><strong>身心的伤口总会结疤，</strong></p>
<p><strong>美好的生活将要来临~</strong></p>
<blockquote>
<p>2020，从新开始，莫谈开头多不易。</p>
<p>记录自己新年在家乡的活动的系列生活小记，就此开始。</p>
</blockquote>
<h2 id="全民战”疫”"><a href="#全民战”疫”" class="headerlink" title="全民战”疫”"></a>全民战”疫”</h2><h2 id="Kobe，曼走"><a href="#Kobe，曼走" class="headerlink" title="Kobe，曼走"></a>Kobe，曼走</h2><p>第一反应：举起女儿Gigi</p>
<h2 id="元宵静月夜"><a href="#元宵静月夜" class="headerlink" title="元宵静月夜"></a>元宵静月夜</h2><p>感恩、尊敬每个在“战疫”中无偿捐赠自己力所能及的力量的</p>
<p><strong>未来未知，所以可期；心怀感恩，砥砺前行！</strong></p>

      
      <!-- reward -->
      
    </div>
      <!-- copyright -->
      
    <footer class="article-footer">
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E7%94%9F%E6%B4%BB/" rel="tag">生活</a></li></ul>


    </footer>

  </div>

  

  
  
  

  

</article>
    
    <article id="post-Vue/Vue版本更新" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/02/04/Vue/Vue%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0/"
    >Vue版本更新</a
  >
</h2>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/2020/02/04/Vue/Vue%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0/" class="article-date">
  <time datetime="2020-02-04T13:03:07.000Z" itemprop="datePublished">2020-02-04</time>
</a>
      
      
      
      
    </div>
    

    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <blockquote>
<p> 一段时间没用Vue，重新拿起来，哇擦都更新到4.x版本了……看着自己的2.9.6版本，陷入了沉思……</p>
</blockquote>
<p>从2.x更新Vue到4.x版本中，需要分两步：将旧版本卸载，再安装当前的新版本Vue，命令如下：</p>
<p>卸载旧版本：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall -g vue-cli</span><br><span class="line">或</span><br><span class="line">yarn global remove vue-cli</span><br></pre></td></tr></table></figure>

<p>安装新版本：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @vue&#x2F;cli</span><br><span class="line">或</span><br><span class="line">yarn global add @vue&#x2F;cli</span><br></pre></td></tr></table></figure>




      
      <!-- reward -->
      
    </div>
      <!-- copyright -->
      
    <footer class="article-footer">
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Vue/" rel="tag">Vue</a></li></ul>


    </footer>

  </div>

  

  
  
  

  

</article>
    
  </article>
  

  
  <nav class="page-nav">
    
    <a class="extend prev" rel="prev" href="/">上一页</a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/3/">下一页</a>
  </nav>
  
</section>
</div>

      <footer class="footer">
  <div class="outer">
    <ul class="list-inline">
      <li>
        &copy;
        2019-2020
        LinPaiBin
      </li>
      <li>
        
          Powered by
        
        
        <a href="https://hexo.io" target="_blank">Hexo</a> Theme <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul class="list-inline">
      <li>
        
        
        <span>
  <i>PV:<span id="busuanzi_value_page_pv"></span></i>
  <i>UV:<span id="busuanzi_value_site_uv"></span></i>
</span>
        
      </li>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
    <div class="to_top">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>
      </div>
    </main>
      <aside class="sidebar">
        <button class="navbar-toggle"></button>
<nav class="navbar" style="opacity: 0.5;">
  
  <div class="logo">
    <a href="/"><img src="/images/ayer-side.svg" alt="滨书"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags/%E7%94%9F%E6%B4%BB/">生活</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/2019/12/02/AboutMe">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
      </aside>
      <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/images/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/images/wechat.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
      
<script src="/js/jquery-2.0.3.min.js"></script>


<script src="/js/jquery.justifiedGallery.min.js"></script>


<script src="/js/lazyload.min.js"></script>


<script src="/js/busuanzi-2.3.pure.min.js"></script>


<script src="/js/share.js"></script>



<script src="/fancybox/jquery.fancybox.min.js"></script>




<script>
  try {
    var typed = new Typed("#subtitle", {
    strings: ['人生如棋，吾愿为卒','愿你一生努力，一生无憾','不求事事顺意，但求无愧于心'],
    startDelay: 0,
    typeSpeed: 250,
    loop: true,
    backSpeed: 100,
    showCursor: true
    });
  } catch (err) {
  }
  
</script>




<script>
  var ayerConfig = {
    mathjax: false
  }
</script>


<script src="/js/ayer.js"></script>


<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script>




<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
  </div>
</body>

</html>